苹果开发教程翻译：iOS 7 自动布局教程：第2部分，Beginning Auto Layout Tutorial in iOS 7: Part 2，第四页

上一页

运行这个应用程序。在竖向模式下看起来狠好，但是在横向模式下就不行了：

问题是显而易见的：妳给四个闪闪发光的容器视图设置了固定的宽度和高度，因此，它们一直保持着那些尺寸，而无论超视图的当前尺寸是什么。

选中4个视图的Width (160)和Height (284)约束，删除它们(最简单的办法是在Document Outline中做这件事)。如果妳再次运行这个应用程序，那么妳将看到以下效果：

注意：妳可能又觉得好奇，为什么有些视图比别的视图大，原因还是与内在内容尺寸有关。图片的尺寸决定了图片视图的尺寸；文本内容的尺寸决定了文本标签的尺寸。再算上边距的约束——每个方向上都是20点——这就决定了每个视图的整体尺寸。

这看起来跟妳在第1部分中解决的那个问题类似，所以，如果妳已经回想起了解决办法的话，妳就知道该怎么办了：让几个视图保持一致的宽度和高度。

选中4个闪闪发光的视图。最容易的方法是在Document Outline 中选中：按住⌘键，依次点击4个视图。妳可以一次性加入这几个约束。在Pin 按钮的弹出面板中，选中Equal Widths 和Equal Heights，然后按Add 6 Constraints。

再次运行这个应用程序，然后旋转设备。啊……还是不太好：

所有的视图确实是具有相同的高度、相同的宽度，因此，妳设置的约束是被满足了。但是，这并不是妳希望它们所具有的宽度和高度。

仅仅设置成让4个视图具有相同的尺寸，还不足以确定出它们究竟应该有什么样的尺寸，因为， 自动布局 系统不知道这4个视图互相之间是如何连接的。在画布中，它们是并排在一起的，但是，它们互相之间并没有真正的约束来表明这一点。 自动布局 系统并不知道它应当将窗口的宽度平分给“Ray”和“Matthijs”。

既然自动布局系统无法自动推断出这一点，那么，妳就需要告诉它这一点。

选中Ray和Matthijs两个大框框，然后选择Editor 菜单中的Pin\Horizontal Spacing。因为这两个框框的紧挨在一起的，所以，这会导致在它们之间添加一个尺寸为0的Horizontal Space 约束，这就足够让 自动布局 系统知道这两个视图是如何关联的了。同样地，使用Editor\Pin\Vertical Spacing 在Ray 和Dennis Ritchie 两个大框框之间加入一个Vertical Space 约束。

再次运行这个应用程序，这回好了：

注意：在这个时刻，Interface Builder仍然会抱怨说视图放偏了位置。我不确定为什么会这样，但是，看起来这是 Xcode 的一个漏洞（bug）。如果妳看着这些警告不顺眼的话，那么，选中主视图（或者是视图控制器），然后，在Resolve Auto Layout Issues 菜单中选择Update All Frames in View Controller。这并不会影响到该应用程序在运行时的行为，但是，它最少能让Xcode 爽起来。

关于图片视图的快速说明：它们的尺寸延伸开了，因为妳并没有给它们设置固定尺寸。妳可能都没意识到这一点，但是这是故意留给妳自己解决的。☺ 否则的话，在横向模式中，图片视图的显示就不对。然而，如果妳想让图片视图保持自己的原始宽高比的话，妳就狠不幸了。妳无法通过Interface Builder 来实现以下效果：

遗憾的是，Interface Builder并未提供一种手段来创建出让视图保持自己原始宽高比的约束。要想实现这一点的话，妳需要通过程序代码来创建及设置约束。

未知美人

未知美人

未知美人